<template>
    <div class="shopbag">
        <navtop title="购物袋" :right-text="text" @click-right="edit" :fixed="true" />
        <div class="shopbag-bg"></div>
        <div class="shopbag-list">
            <div class="shopbag-list-item" v-for="item in shopbagData" :key="item.sid">
                <van-swipe-cell>
                    <div class="shp-item">
                        <div>
                            <van-checkbox v-model="item.isCheck" checked-color="#0C34BA" @change="selectOne">
                            </van-checkbox>
                        </div>
                        <div class="shp-img">
                            <img class="auto-img" :src="item.small_img" alt="">
                        </div>
                        <div class="shopbag-item-content">
                            <div class="shopbag-name">
                                <div class="zhname-box">
                                    <div class="zhname one-text">{{ item.name }}</div>
                                    <div class="rule one-text">{{ item.rule }}</div>
                                </div>
                                <div class="enname one-text">{{ item.enname }}</div>
                            </div>

                            <div class="price-count">
                                <div class="price">&yen;{{ item.price }}</div>
                                <div class="count">
                                    <van-stepper v-model="item.count" theme="round" button-size="22" disable-input
                                        @change="updateCount(item.sid, item.count)" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <template #right>
                        <van-button class="mydelectbtn" @click="removeShopbag([item.sid])" square color="#e4393c"
                            text="删除" />
                    </template>
                </van-swipe-cell>
            </div>
            <div class="" v-show="shopbagData.length > 0">
                <van-submit-bar @submit="getOrder" v-show="!isEdit" :price="total" button-text="提交订单">
                    <van-checkbox @click="allSelect" v-model="isAllSelect" checked-color="#0C34BA">全选</van-checkbox>
                </van-submit-bar>

                <van-submit-bar button-text="删除选择" v-show="isEdit" @submit="removeSelectShopbag">
                    <van-checkbox v-model="isAllSelect" @click="allSelect" checked-color="#0C34BA">全选</van-checkbox>
                </van-submit-bar>
            </div>
            <van-empty v-show="shopbagData.length === 0" description="购物袋没有商品！" />
        </div>
        <navigationBar :iNum="itemNum" />
    </div>
</template>
<script setup lang="ts">
import navigationBar from "../components/navigationBar.vue";

import navtop from "../components/navtop.vue";

import { Toast } from 'vant'

import { getShopbagProduct, postmodifyShopcartCount, postdeleteShopcart } from '@/api/index';

import { useRouter } from "vue-router";
// import { forEach } from "lodash";

let router: any = useRouter();


let itemNum = ref<string>("2");

let text: any = ref<string>("");

// let total: any = ref<number>(0 * 100);

let isAllSelect: any = ref<boolean>(false);

let isEdit: any = ref<boolean>(false);

//购物袋数据
let shopbagData: any = ref<Array<any>>([]);

//
const total = computed(() => {
    let total: number = 0;
    shopbagData.value.forEach((item: any): void => {
        if (item.isCheck) {
            total += item.price * item.count;
        }
    })
    return total * 100
})

//删除选择的商品
let removeSelectShopbag: () => void = (): void => {
    //获取删除的购物袋数据的sid
    let sids: Array<string> = [];

    shopbagData.value.forEach((item: any): void => {
        if (item.isCheck) {
            sids.push(item.sid);
        }
    });

    removeShopbag(sids);
};

//编辑
let edit: () => void = (): void => {
    // console.log(111);

    isEdit.value = !isEdit.value;
    text.value = isEdit.value ? "完成" : "编辑";
};

let getOrder: () => void = (): void => {
    let sidsArr = [];
    shopbagData.value.forEach((item) => {
        if (item.isCheck) {
            console.log(item.sid);
            sidsArr.push(item.sid);
        }

    })

    if (sidsArr.length != 0) {
        router.push({
            name: "Orderbuy", params: {
                sids: sidsArr.join("-")
            }
        });
    } else {
        Toast('还没选择商品')
    }



}

let removeShopbag: (sids: Array<string>) => void = (sids: Array<string>): void => {
    postdeleteShopcart({ sids: JSON.stringify(sids) })
        .then((result) => {
            if (result.data.code === 7000) {
                sids.forEach((sid) => {
                    for (let i = shopbagData.value.length - 1; i >= 0; i--) {
                        if (sid === shopbagData.value[i].sid) {
                            shopbagData.value.splice(i, 1);
                            break;
                        }
                    }
                });

                selectOne();

                if (shopbagData.value.length === 0) {
                    text.value = "";
                }
            }
        })
}



let selectOne: () => void = (): void => {


    for (let i = 0; i < shopbagData.value.length; i++) {
        if (!shopbagData.value[i].isCheck) {
            isAllSelect.value = false;
            return;
        }

        isAllSelect.value = true;
    }
}

let allSelect: () => void = (): void => {
    for (let i = 0; i < shopbagData.value.length; i++) {
        shopbagData.value[i].isCheck = isAllSelect.value
    }
}


let updateCount: (sid: string, count: number) => void = (sid: string, count: number): void => {
    console.log(sid);
    console.log(count);
    postmodifyShopcartCount({ sid, count }).then((result: any): void => {
        if (result.data.code === 700) {
            Toast(result.data.msg);
            router.push({ name: "Login" });
            return;
        }
    })

}

onMounted(() => {
    getShopbagProduct().then((result) => {
        // console.log(result);

        if (result.data.code === 5000) {
            result.data.result.forEach((item: any): void => {
                item.isCheck = false;
            });
            shopbagData.value = result.data.result;
            if (shopbagData.value.length === 0) {
                text.value = "";
            } else {
                text.value = "编辑";

            }
        }
    })
})

</script>

<style lang="less"  scoped>
.van-submit-bar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--van-submit-bar-height);
    padding: var(--van-submit-bar-padding);
    font-size: var(--van-submit-bar-text-font-size);
}

.shopbag {
    padding-top: 46px;
    padding-bottom: 100px;

    :deep(.van-submit-bar) {
        bottom: 50px;
    }

    :deep(.van-submit-bar__button--danger) {
        margin-left: auto;
    }

    .shopbag-list-item {
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;

        &:last-child {
            margin-bottom: 0;
        }

        .mydelectbtn {
            height: 100%;
        }

        :deep(.van-button) {
            height: 100%;
        }

        .shp-item {
            display: flex;
            padding: 10px;
            align-items: center;

            .shp-img {
                width: 80px;
                height: 80px;
                margin-left: 10px;
                margin-right: 10px;

                .auto-img {
                    border-radius: 5px;
                    width: 100%;
                }
            }

            .shopbag-item-content {
                width: calc(~"100% - 20px - 20px - 80px");
                height: 80px;
            }

            .price {
                font-size: 14px;
                font-weight: bold;
                color: #e4393c;
                margin-right: auto;
            }

            .enname {
                font-size: 12px;
                color: #999;
                margin-top: 3px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .zhname {
                font-size: 14px;
                max-width: 100px;
            }

            .rule {
                margin-left: 20px;
                color: #666;
                font-size: 14px;
                max-width: 100px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .shopbag-name {
                height: 40px;
            }

            .price-count {
                height: 40px;
                display: flex;
                align-items: center;
            }

            .zhname-box {
                display: flex;
            }
        }
    }

    .shopbag-list {
        padding: 10px;
    }

    .shopbag-bg {
        height: 60px;
        background: url("../assets/shopbag_bg.png") no-repeat center center;
        background-size: cover;
    }
}
</style>